<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件使用情况</title>
  <link rel="stylesheet" href="../../mobile_static/css/element.css">
  <link rel="stylesheet" href="../../mobile_static/css/base.css">
  <link rel="stylesheet" href="../../mobile_static/css/operationIndexAnalysis/componentUsage.css">
  <script src="../../mobile_static/js/vue.js"></script>
  <script src="../../mobile_static/js/axios.js"></script>

</head>

<body>
  <div id="app">
    <div class="app-content">
      <div class="top-bar">
        <div class="top-bar_left">
          <ul>
            <li>
              <el-button @click="backHome" type="primary" plain>返回</el-button>
            </li>
            <li :class="{'selected':isSelect === 2}" @click="isSelect=2">近7天</li>
            <li :class="{'selected':isSelect === 3}" @click="isSelect=3">近30天</li>
            <li :class="{'selected':isSelect === 4}" @click="isSelect=4">本年</li>
          </ul>
          <div class="date-box">
            <el-date-picker v-model="timeValue" value-format="yyyy-MM-dd" @change="dateChange" unlink-panels
              type="daterange" range-separator="至" start-placeholder="请选择开始日期" end-placeholder="请选择结束日期">
            </el-date-picker>
          </div>
        </div>
        <div class="top-bar_right">
        </div>
      </div>

      <!-- 表格 -->
      <div class="table-box">
        <!-- 表格标题 -->
        <div class="table-title flex between middle search-box-list">
          <h2>组件名称：{{comName}}</h2>
          <div class="selector-App flex middle">
            <el-select clearable style="width: 200px;" v-model="AppValue" placeholder="请选择APP类型" @change="search">
              <el-option v-for="item in AppOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-select clearable class="ml10" style="width: 200px;" v-model="value" placeholder="请选择工作台应用类型" @change="search">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-input prefix-icon="el-icon-search" class="ml10" style="width:200px;" v-model="searchValue" placeholder="按应用名称搜索" @change="search"></el-input>
            <el-button type="primary" class="ml10" @click="download">下载</el-button>
          </div>
        </div>
        <!-- 表格主体 -->
        <div class="table-main">
          <el-table :data="tableData" stripe style="width: 100%" v-loading="loading" border :header-cell-style="{background: 'linear-gradient(180deg, #FAFAFA 0%, #F1F1F1 100%)',fontSize:'16px',fontWeight:'bold',color:'#000000'}">
            <el-table-column prop="g0modulename" label="工作台应用名称" min-width="150">
            </el-table-column>
            <el-table-column prop="g0module_type_desc" label="应用类型"  min-width="120">
            </el-table-column>
            <el-table-column prop="g0app_type_desc" label="APP类型"  min-width="120">
            </el-table-column>
            <el-table-column label="所属企业" prop="g0enterprise_name" min-width="350">
            </el-table-column>
            <el-table-column label="使用时间" prop="g0createdtime" min-width="260">
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="paging-box">
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="thisPage" :page-sizes="[10, 20, 30, 40]" :page-size="size"
              layout="total, sizes, prev, pager, next, jumper" :total="length">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script src="../../mobile_static/js/element.js"></script>
<script type="module">
  import { postThreeId, getThreeIdDownload } from '../../mobile_static/axios/axios.config.js'

  new Vue({
    el: "#app",
    data() {
      return {
        loading: false,

        comName: '',
        timeValue: [], //日期value值
        isSelect: 5,
        options: [{
          value: "1",
          label: "集团统推"
        }, {
          value: "2",
          label: "企业自建"
        },],
        value: '', //选择器value值
        AppValue: "",
        AppOptions: [{
          value: "0",
          label: "iPad"
        }, {
          value: "1",
          label: "iPhone"
        }, {
          value: "3",
          label: "Android"
        }, {
          value: "99",
          label: "其他"
        }],
        searchValue: "",
        startDate: "1900-01-01",
        endDate: "2099-03-08",
        size: 10,
        thisPage: 1,
        length: "",
        code: "",
        tableData: [{
          workbenchName: "费用报销-费用填报",
          applicationType: "企业自建",
          AppType: "iPhone",
          affiliatedCompanies: "总部",
          useTime: "2022-01-05 15:00:00"
        },
        {
          workbenchName: "公文审批",
          applicationType: "集团统推",
          AppType: "Android",
          affiliatedCompanies: "胜利油田",
          useTime: "2022-01-05 15:00:00"
        },
        {
          workbenchName: "费用报销",
          applicationType: "企业自建",
          AppType: "iPhone",
          affiliatedCompanies: "化工销售",
          useTime: "2022-01-05 15:00:00"
        },
        {
          workbenchName: "ERP审批",
          applicationType: "集团统推",
          AppType: "Android",
          affiliatedCompanies: "石油工程",
          useTime: "2022-01-05 15:00:00"
        },
        ],
      }
    },
    created() {
      console.log(window.location.search.slice(1));
      this.code = window.location.search.slice(1).split("&")[0].split('=')[1]
      this.comName = decodeURI(window.location.search.slice(1).split("&")[1].split('=')[1])
    },
    mounted() {
      this.RequestComponentDetails()
    },
    watch: {
      isSelect(val) {
        this.thisPage = 1
        let nowDate = new Date();
        this.endDate = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}-${this.ZeroComplement(nowDate.getDate())}`
        if (val === 2) {
          this.timeValue = []
          let date1 = new Date();
          //今天时间
          let time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate()
          let date2 = new Date(date1);
          let date3 = new Date(date1);
          date2.setDate(date1.getDate() + -7);
          date3.setDate(date1.getDate() + -14);
          //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
          let time2 = date2.getFullYear() + "-" + this.ZeroComplement((date2.getMonth() + 1)) + "-" + this.ZeroComplement(date2.getDate());
          let time3 = date3.getFullYear() + "-" + (date3.getMonth() + 1) + "-" + date3.getDate();
          this.startDate = time2
        } else if (val === 3) {
          this.timeValue = []
          let day_30 = new Date().setMonth((new Date().getMonth() - 1));    //日期是30天前的对应时间戳
          day_30 = new Date(day_30);       //转换成标准时间
          let y = day_30.getFullYear();    //年
          let m = day_30.getMonth() + 1;    //月
          let d = day_30.getDate();        //日
          if (m < 10) {
            m = '0' + m;
          }
          if (d < 10) {
            d = '0' + d;
          }
          this.startDate = `${y}-${m}-${d}`
        } else if (val === 4) {
          this.timeValue = []
          this.startDate = nowDate.getFullYear() + "-01-01"
        }
        if (val) {
          this.RequestComponentDetails()
        }
      }
    },
    methods: {
      backHome() {
        window.history.back()
      },
      handleSizeChange(val) {
        this.size = val
        this.RequestComponentDetails()
      },
      handleCurrentChange(val) {
        this.thisPage = val
        this.RequestComponentDetails()
      },
      //日期选择器改变重新请求数据
      dateChange() {
        this.isSelect = 0
        this.startDate = this.timeValue[0]
        this.endDate = this.timeValue[1]
        this.RequestComponentDetails()
      },
      search() {
        this.thisPage = 1
        this.RequestComponentDetails()
      },
      //请求组件明细数据
      RequestComponentDetails() {
        this.loading = true
        postThreeId("zjsyqkmxlb00", {
          pageSize: this.size,
          pageNum: this.thisPage,
          startDate: this.startDate,
          endDate: this.endDate,
          g0componentCode: this.code,
          g0moduleName: this.searchValue,
          g0moduleTypeCode: this.value,
          g0appTypeCode: this.AppValue
        }).then(res => {
        this.loading = false
          res = JSON.parse(res.data.msg);
          console.log(res, "请求组件明细数据成功");
          if (res.total) {
            this.tableData = res.data
          } else {
            this.tableData = []
          }
          this.length = res.total
        })
      },
      //下载
      download() {
        if (this.length > 50000) {
          this.$notify.error({
            title: '下载失败',
            message: "下载数据条数不能超过50000条",
          });
          return
        }
        this.loading = true
        getThreeIdDownload("zjsyqkmxlb00Export", {
          pageSize: this.length,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0componentCode: this.code,
          g0moduleName: this.searchValue,
          g0moduleTypeCode: this.value,
          g0appTypeCode: this.AppValue
        }).then(res => {
          if (!res) {
            return
          }
          this.loading = false

          let url = window.URL.createObjectURL(res.data)
          let link = document.createElement("a")
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', '组件使用情况.xlsx')
          document.body.appendChild(link)
          link.click()
        })
      },
      //补零函数
      ZeroComplement(num) {
        if (num < 10) {
          return "0" + num;
        } else {
          return num;
        }
      }
    }
  })
</script>